@import './moudles/reset.scss';
@import './moudles/header.scss';
@import './moudles/footer.scss';

.content{
    width: 100%;
    padding:20px 0;
    display: block;
    background: #ccc;
    .nav{
        width:80%;
        height:150px;
        background:#fff;
        .navlist{
            display: flex;
            justify-content: center;
            li{
                width:23%;
                height:80px;
                margin-top: 15px;
                // background: pink;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                position: relative;
                border-bottom: 2px solid #bbb;
                &:nth-child(1){border-bottom: 2px solid #000;}
                p{
                    width:10px;
                    height:10px;
                    background:#bbb;
                    border-radius: 50%;
                    position: absolute;
                    top:75px;
                }
                .first{background: #000;}
                
            }
           
        }
    }
    .con{
        width:80%;
        // height:500px;
        margin-top: 20px;
        background: #fff;
        .top{
            width:10%;
            height:80px;
            margin-left: 5%;
            display: flex;
            align-items: center;
            // background: red;
        }
        .shop{
            width:90%;
            height:200px;
            margin-left: 5%;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #ccc;
            background: #fff;
            .shopleft{
                width:15%;
                height:50%;
                display: flex;
                justify-content: center;
                align-items: center;
                // background: pink;
                img{
                    width:80px;
                    height:80px;
                }
            }
            .shopright{
                width:85%;
                height:50%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                // background: skyblue;
                li{
                    span{
                        color:#666;
                    }
                }
                .input{
                    border: 1px solid #ddd;
                    border-radius: 5px;
                    margin:0 10px;
                    width:100px;
                    height:28px;
                    line-height: 30px;
                    display: flex;
                    justify-content: space-between;
                    .minus,.add{
                        width:30px;
                        height:30px;
                        display: flex;
                        cursor: pointer;
                        justify-content: center;
                        align-items: center;
                        // background: red;
                        img{
                            width:20px;
                            height:20px;
                        }
                    }
                }
            }
        }
        .foot{
            width:90%;
            height:80px;
            // background: blue;
            margin-left: 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            li{
                a{
                    display: inline-block;
                    width:120px;
                    height:40px;
                    line-height: 40px;
                    text-align: center;
                    background: orangered;
                }
            }
        }
    }
}
.empty{
    width:100%;
    margin: auto;
    height:600px;
    display: none;
    text-align: center;
    background:#ddd;
   
    i{
        display: block;
        color:#aaa;
        padding: 50px;
        // background: red;
        font-size: 250px;;
    }
    h3{
        width:200px;
        height:50px;
        line-height: 50px;
        margin:50px auto;
        background: orangered;
    }
}
